{% extends theme_path('base.html') %}

{% block title %}{{ '编辑文章' if article else '创建文章' }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
    <form method="post" class="grid grid-cols-1 lg:grid-cols-3 gap-6" id="articleForm" onsubmit="return validateForm()">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        
        <!-- 左侧主要内容区域 -->
        <div class="lg:col-span-2 space-y-6">
            <!-- 标题输入 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    标题
                </label>
                <input type="text" name="title" required
                       value="{{ article.title or '' }}"
                       class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                              focus:outline-none focus:ring-2 focus:ring-blue-500 
                              bg-white dark:bg-gray-700 
                              text-gray-900 dark:text-white">
            </div>

            <!-- 内容编辑器 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    内容
                </label>
                <textarea id="editor" name="content">{{ article.content or '' }}</textarea>
            </div>

            <!-- 在内容编辑器后面添加自定义字段部分 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mt-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">自定义字段</h3>
                    <button type="button" onclick="addCustomField()"
                            class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded-lg 
                                   hover:bg-gray-50 dark:hover:bg-gray-700
                                   text-gray-700 dark:text-gray-300">
                        + 添加字段
                    </button>
                </div>
                
                <div id="customFields" class="space-y-4">
                    <!-- 主题预定义字段 -->
                    {% if theme.article_fields %}
                        {% for field_key, field in theme.article_fields.items() %}
                        <div class="flex items-center space-x-4">
                            <input type="text" name="field_keys[]" value="{{ field_key }}"
                                   placeholder="字段名" readonly
                                   class="w-1/3 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                          bg-gray-50 dark:bg-gray-600
                                          text-gray-900 dark:text-white">
                            {% if field.type == 'image' %}
                            <div class="flex-1 flex items-center space-x-2">
                                <input type="text" name="field_values[]"
                                       value="{{ article.get_field(field_key) or '' if article else '' }}"
                                       placeholder="{{ field.description or '字段值' }}"
                                       class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                              focus:outline-none focus:ring-2 focus:ring-blue-500 
                                              bg-white dark:bg-gray-700 
                                              text-gray-900 dark:text-white">

                            </div>
                            {% else %}
                            <input type="text" name="field_values[]"
                                   value="{{ article.get_field(field_key) or '' if article else '' }}"
                                   placeholder="{{ field.description or '字段值' }}"
                                   class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                          focus:outline-none focus:ring-2 focus:ring-blue-500 
                                          bg-white dark:bg-gray-700 
                                          text-gray-900 dark:text-white">
                            {% endif %}
                        </div>
                        {% endfor %}
                    {% endif %}

                    <!-- 自定义字段 -->
                    {% if article and article.fields %}
                        {% for key, value in article.fields.items() %}
                            {% if not theme.article_fields or key not in theme.article_fields %}
                            <div class="flex items-center space-x-4">
                                <input type="text" name="field_keys[]" value="{{ key }}"
                                       placeholder="字段名"
                                       class="w-1/3 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                              focus:outline-none focus:ring-2 focus:ring-blue-500 
                                              bg-white dark:bg-gray-700 
                                              text-gray-900 dark:text-white">
                                <input type="text" name="field_values[]" value="{{ value }}"
                                       placeholder="字段值"
                                       class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                              focus:outline-none focus:ring-2 focus:ring-blue-500 
                                              bg-white dark:bg-gray-700 
                                              text-gray-900 dark:text-white">
                                <button type="button" onclick="removeCustomField(this)"
                                        class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 右侧设置区域 -->
        <div class="space-y-6">
            <!-- 发布时间 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    发布时间
                </label>
                <input type="datetime-local"
                       name="created_at"
                       value="{{ article.created_at.strftime('%Y-%m-%dT%H:%M') if article else '' }}"
                       class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg
                              focus:outline-none focus:ring-2 focus:ring-blue-500
                              bg-white dark:bg-gray-700
                              text-gray-900 dark:text-white">
                <p class="mt-1 text-xs text-gray-500">留空则使用当前时间</p>
            </div>

            <!-- 分类选择 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
                    分类
                </label>
                <div class="space-y-3 max-h-[400px] overflow-y-auto custom-scrollbar">
                    {% macro render_category_checkbox(category, level=0) %}
                    <div class="category-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded-lg transition-colors duration-200 {% if level > 0 %}ml-{{ level * 4 }}{% endif %}">
                        <div class="relative flex items-center">
                            <input type="checkbox" 
                                   name="categories" 
                                   value="{{ category.id }}"
                                   id="category_{{ category.id }}"
                                   {% if article and category.id in article.categories|map(attribute='id') %}checked{% endif %}
                                   class="w-4 h-4 text-blue-600 border-gray-300 rounded 
                                          focus:ring-blue-500 dark:focus:ring-blue-600
                                          dark:bg-gray-600 dark:border-gray-500">
                            <label for="category_{{ category.id }}" 
                                   class="ml-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                                {{ category.name }}
                                <span class="text-xs text-gray-500 dark:text-gray-400 ml-1">({{ category.article_count }})</span>
                            </label>
                        </div>
                    </div>
                    {% if category._children %}
                        {% for child in category._children %}
                            {{ render_category_checkbox(child, level + 1) }}
                        {% endfor %}
                    {% endif %}
                    {% endmacro %}

                    {% for category in categories %}
                        {{ render_category_checkbox(category) }}
                    {% endfor %}
                </div>
            </div>

            <!-- 文章状态 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    文章状态
                </label>
                <select name="status" 
                        id="articleStatus"
                        onchange="togglePasswordField()"
                        class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                               focus:outline-none focus:ring-2 focus:ring-blue-500 
                               bg-white dark:bg-gray-700 
                               text-gray-900 dark:text-white">
                    <option value="public" {% if article and article.status == 'public' %}selected{% endif %}>公开</option>
                    <option value="hidden" {% if article and article.status == 'hidden' %}selected{% endif %}>隐藏</option>
                    <option value="password" {% if article and article.status == 'password' %}selected{% endif %}>密码保护</option>
                    <option value="private" {% if article and article.status == 'private' %}selected{% endif %}>私密</option>
                    <option value="draft" {% if article and article.status == 'draft' %}selected{% endif %}>草稿</option>
                    <option value="pending" {% if article and article.status == 'pending' %}selected{% endif %}>待审核</option>
                </select>

                <!-- 密码保护选项 -->
                <div id="passwordField" class="mt-4 {% if not article or article.status != 'password' %}hidden{% endif %}">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        访问密码
                    </label>
                    <input type="password" 
                           name="password" 
                           value="{{ article.password or '' }}"
                           placeholder="留空将使用默认密码: 123456"
                           class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                  focus:outline-none focus:ring-2 focus:ring-blue-500 
                                  bg-white dark:bg-gray-700 
                                  text-gray-900 dark:text-white">
                </div>
            </div>

            <!-- 标签设置 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    标签
                </label>
                <div class="relative">
                    <!-- 标签输入区域 -->
                    <div class="flex flex-wrap items-center gap-2 p-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg min-h-[42px]">
                        <div id="selected-tags" class="flex flex-wrap gap-2">
                            {% if article %}
                                {% for tag in article.tags %}
                                <span class="tag-item inline-flex items-center px-2.5 py-1 bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 rounded-full text-sm">
                                    {{ tag.name }}
                                    <button type="button" onclick="removeTag(this)" class="ml-1.5 text-blue-600 hover:text-blue-800 dark:text-blue-400">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                        </svg>
                                    </button>
                                </span>
                                {% endfor %}
                            {% endif %}
                        </div>
                        <input type="text" 
                               id="tag-input"
                               placeholder="输入标签，按空格或回车添加"
                               class="flex-1 min-w-[120px] bg-transparent border-0 outline-none focus:ring-0 text-gray-900 dark:text-gray-100">
                        <input type="hidden" name="tag_names" id="tag-names" value="{{ article.tags|map(attribute='name')|join(' ') if article else '' }}">
                    </div>
                    <!-- 标签建议下拉框 -->
                    <div id="tag-suggestions" class="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 hidden"></div>
                </div>
            </div>

            <!-- 评论设置 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                <div class="flex items-center">
                    <input type="checkbox" 
                           name="allow_comment" 
                           id="allowComment"
                           {% if not article or article.allow_comment %}checked{% endif %}
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="allowComment" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                        允许评论
                    </label>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="flex justify-end space-x-4">
                <a href="{{ ArticleUrlGenerator.generate(article.id, article.category_id, article.created_at) if article else url_for('blog.index') }}"
                   class="px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300">
                    取消
                </a>
                <button type="submit"
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    {{ '保存修改' if article else '发布文章' }}
                </button>
            </div>
        </div>
    </form>
</div>

<!-- 保留原有的 TinyMCE 和其他脚本 -->
{{ render_tinymce(selector='#editor', article_id=article.id if article else 0) }}

<!-- 添加自定义滚动条样式 -->
<style>
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.8);
}

/* 标签输入框样式 */
#tag-suggestions {
    max-height: 200px;
    overflow-y: auto;
}

#tag-suggestions .suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

#tag-suggestions .suggestion-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.dark #tag-suggestions .suggestion-item:hover {
    background-color: rgba(59, 130, 246, 0.2);
}
</style>

<!-- 添加标签建议脚本 -->
<script>
const tagInput = document.getElementById('tag-input');
const selectedTags = document.getElementById('selected-tags');
const tagNames = document.getElementById('tag-names');
const tagSuggestions = document.getElementById('tag-suggestions');

let currentTags = new Set(tagNames.value.split(' ').filter(Boolean));

// 添加标签
function addTag(tagName) {
    tagName = tagName.trim();
    if (!tagName || currentTags.has(tagName)) return;
    
    currentTags.add(tagName);
    
    const tagElement = document.createElement('span');
    tagElement.className = 'tag-item inline-flex items-center px-2.5 py-1 bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 rounded-full text-sm';
    tagElement.innerHTML = `
        ${tagName}
        <button type="button" onclick="removeTag(this)" class="ml-1.5 text-blue-600 hover:text-blue-800 dark:text-blue-400">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    `;
    
    selectedTags.appendChild(tagElement);
    tagNames.value = Array.from(currentTags).join(' ');
    tagInput.value = '';
}

// 移除标签
function removeTag(button) {
    const tagItem = button.closest('.tag-item');
    const tagName = tagItem.textContent.trim();
    currentTags.delete(tagName);
    tagItem.remove();
    tagNames.value = Array.from(currentTags).join(' ');
}

// 处理标签输入
tagInput.addEventListener('keydown', function(e) {
    if (e.key === ' ' || e.key === 'Enter') {
        e.preventDefault();
        addTag(this.value);
    }
});
// 给输入框添加 blur 事件监听器，当失去焦点时调用 addTag 函数
tagInput.addEventListener('blur', function() {
    if(!tagSuggestions.contains(e.target)){
        addTag(this.value);
    }
});
// 获取标签建议
let debounceTimer;
tagInput.addEventListener('input', function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        const query = this.value.trim();
        if (query.length < 1) {
            tagSuggestions.innerHTML = '';
            tagSuggestions.classList.add('hidden');
            return;
        }
        
        fetch(`/tags/suggestions?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(suggestions => {
                if (suggestions.length === 0) {
                    tagSuggestions.classList.add('hidden');
                    return;
                }
                
                tagSuggestions.innerHTML = suggestions.map(tag => `
                    <div class="suggestion-item text-sm text-gray-700 dark:text-gray-300" onclick="addTag('${tag.name}')">
                        # ${tag.name}
                        <span class="text-xs text-gray-500 dark:text-gray-400">(${tag.count})</span>
                    </div>
                `).join('');
                
                tagSuggestions.classList.remove('hidden');
            });
    }, 300);
});

// 点击外部关闭标签建议
document.addEventListener('click', function(e) {
    if (!tagInput.contains(e.target) && !tagSuggestions.contains(e.target)) {
        tagSuggestions.classList.add('hidden');
    }
});
</script>

<script>
// 页面加载时检查状态
document.addEventListener('DOMContentLoaded', function() {
    togglePasswordField();
});

function togglePasswordField() {
    const status = document.getElementById('articleStatus').value;
    const passwordField = document.getElementById('passwordField');
    
    if (status === 'password') {
        passwordField.classList.remove('hidden');
    } else {
        passwordField.classList.add('hidden');
    }
}
</script>

<!-- 在页面底部添加验证脚本 -->
<script>
function validateForm() {
    // 先同步编辑器内容
    tinymce.triggerSave();
    
    // 检查分类选择
    const categories = document.querySelectorAll('input[name="categories"]:checked');
    if (categories.length === 0) {
        showAlert('请至少选择一个分类', 'error', '错误');
        document.querySelector('.custom-scrollbar').scrollIntoView({ behavior: 'smooth', block: 'center' });
        return false;
    }
    
    // 检查标题
    const title = document.querySelector('input[name="title"]').value.trim();
    if (!title) {
        showAlert('请填写文章标题', 'error', '错误');
        document.querySelector('input[name="title"]').focus();
        return false;
    }
    
    // 检查内容
    const content = tinymce.get('editor').getContent().trim();
    if (!content) {
        showAlert('请填写文章内容', 'error', '错误');
        tinymce.get('editor').focus();
        return false;
    }
    
    // 确保内容已经同步到表单
    document.querySelector('textarea[name="content"]').value = content;
    
    return true;
}

// 修改表单提交处理
document.getElementById('articleForm').onsubmit = function(e) {
    if (!validateForm()) {
        return false;
    }
    
    e.preventDefault();
    
    // 再次确保编辑器内容已同步
    tinymce.triggerSave();
    
    const formData = new FormData(this);
    
    // 获取自定义字段
    const fields = {};
    const keys = Array.from(this.querySelectorAll('input[name="field_keys[]"]'));
    const values = Array.from(this.querySelectorAll('input[name="field_values[]"]'));
    keys.forEach((key, index) => {
        if (key.value.trim()) {
            fields[key.value.trim()] = values[index].value;
        }
    });
    
    // 添加到表单数据
    formData.set('fields', JSON.stringify(fields));
    
    // 再次确保内容已经添加到表单数据
    formData.set('content', tinymce.get('editor').getContent());
    
    // 发送请求
    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'Accept': 'application/json'  // 添加这行,表明期望返回JSON
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('网络错误');
        }
        return response.json();
    })
    .then(data => {
        if (data.error) {
            showAlert(data.error, 'error', '错误');
        } else {
            showAlert(data.message, 'success', '成功');
            if (data.url) {
                setTimeout(() => location.href = data.url, 500);
            }
        }
    })
    .catch(error => {
        showAlert(error.message, 'error', '错误');
    });
    
    return false;
};

// 添加分类选择监听
document.querySelectorAll('input[name="categories"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const categories = document.querySelectorAll('input[name="categories"]:checked');
        if (categories.length === 0) {
            // 如果没有选中任何分类,显示提示
            showAlert('请至少选择一个分类', 'warning', '提示');
        }
    });
});
</script>


<!-- 在现有的 JavaScript 代码中添加字段操作函数 -->
<script>
function addCustomField() {
    const container = document.getElementById('customFields');
    const fieldDiv = document.createElement('div');
    fieldDiv.className = 'flex items-center space-x-4';
    fieldDiv.innerHTML = `
        <input type="text" name="field_keys[]"
               placeholder="字段名"
               class="w-1/3 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                      focus:outline-none focus:ring-2 focus:ring-blue-500 
                      bg-white dark:bg-gray-700 
                      text-gray-900 dark:text-white">
        <input type="text" name="field_values[]"
               placeholder="字段值"
               class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                      focus:outline-none focus:ring-2 focus:ring-blue-500 
                      bg-white dark:bg-gray-700 
                      text-gray-900 dark:text-white">
        <button type="button" onclick="removeCustomField(this)"
                class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    `;
    container.appendChild(fieldDiv);
}

function removeCustomField(button) {
    button.closest('div').remove();
}


</script>
{% endblock %} 